<template>
    <div>
        <div id="main-box" ref="content" :style="`transform: scale(${ObjInput.ChangeDocumentSize.scale});font-family:'Times New Roman WGL W05 Regula'`">
            <div class="main-title" style="font-family: inherit;">
                {{ ObjInput.title }}
                <span v-if="!ObjInput.title || !ObjInput.title.trim()" class="showNodata">FIRSTNAME LASTNAME</span>
            </div>
            <div class="contact-box">
                <div class="contact-one" @click="ItemClick({type:'Email'})">
                    <span>Email:</span>
                    <span style="color: #0075cb;text-decoration: underline;">
                        {{ ObjInput.Email }}
                        <span v-if="!ObjInput.Email || !ObjInput.Email.trim()" class="showNodata">Email</span>
                    </span>
                </div>
                <div class="contact-one" @click="ItemClick({type:'Phone'})">
                    <span>Phone:</span>
                    {{ ObjInput.Phone }}
                    <span v-if="!ObjInput.Email || !ObjInput.Email.trim()" class="showNodata">Primary Phone Number</span>
                </div>
            </div>
            <div class="contact-box">
                <div class="contact-one" @click="ItemClick({type:'Website'})" v-if="ObjInput.Website">
                    <span>Website:</span>
                    {{ ObjInput.Website }}
                </div>
                <div class="contact-one" @click="ItemClick({type:'Location'})" v-if="ObjInput.Location">
                    <span>Location:</span>
                    {{ ObjInput.Location }}
                </div>
            </div>
            <div class="Objective" @click="ItemClick({type:'Objective'})">
                {{ ObjInput.Objective }}
            </div>
            <template v-for="(item, index) in ObjShowIt">
                <template v-if="item.Show">
                    
                    <template v-if="item.type == 'WORK'">
                        <div class="box-one" @click="ItemClick(item)">
                            <p class="item-title" :style="`border-bottom: 1px solid ${ObjInput.ChangeColor};`">{{ item.Title }}</p>
                            <div class="word-one" v-for="(obj, objIndex) in item.data">
                                <p class="work-first">
                                    <span  v-if="obj.Company">{{ obj.Company }}</span>
                                    <span v-else class="showNodata">Position</span>
                                    <span  v-if="obj.Date">{{ obj.Date.join(' - ') }}</span>
                                    <span v-else class="showNodata">Date</span>
                                </p>
                                <p class="work-second">
                                    {{ obj.Job_Title }}
                                    <span v-if="!obj.Job_Title" class="showNodata">Company/Business/Organization</span>
                                </p>
                                <ul v-if="obj.Description && getLiContent(obj.Description).length > 0 && getLiContent(obj.Description)[0] != ''"
                                    :style="!obj.hideIt ? 'list-style-type: disc;' : 'list-style-type: none; margin-left:0px;'">
                                    <li v-for="(liItem, liIndex) in getLiContent(obj.Description)" :key="liIndex">
                                        {{ liItem }}</li>
                                </ul>
                                <ul v-else>
                                    <li>
                                        <span class="showNodata">Bullets showcasing achievements and accomplishments</span>
                                    </li>
                                </ul>
                                <p>
                                    {{obj.modification}}
                                </p>
                            </div>
                        </div>
                    </template>
                    <template v-else-if="item.type == 'EDUCATION'">
                        <div class="box-one" @click="ItemClick(item)">
                            <p class="item-title" :style="`border-bottom: 1px solid ${ObjInput.ChangeColor};`">{{ item.Title }}</p>
                            <div class="word-one" v-for="(obj, objIndex) in item.data">
                                <p class="work-first">
                                    <span v-if="obj.School">{{ obj.School }}</span>
                                    <span v-else class="showNodata">University</span>
                                    <span v-if="obj.Date">{{ obj.Date.join(' - ') }}</span>
                                    <span v-else class="showNodata">Date</span>
                                </p>
                                <p class="work-second">
                                    {{ obj.Degree_Major }} {{obj.GPA?'-':''}} {{obj.GPA}}
                                    <span v-if="!obj.Degree_Major && !obj.GPA" class="showNodata">Degree Name</span>
                                </p>
                                <ul v-if="obj.Description && getLiContent(obj.Description).length > 0 && getLiContent(obj.Description)[0] != ''"
                                    :style="!obj.hideIt ? 'list-style-type: disc;' : 'list-style-type: none; margin-left:0px;'">
                                    <li v-for="(liItem, liIndex) in getLiContent(obj.Description)" :key="liIndex">
                                        {{ liItem }}</li>
                                </ul>
                                <ul v-else>
                                    <li>
                                        <span class="showNodata">Include additional academic information</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </template>
                    <template v-else-if="item.type == 'PROJECT'">
                        <div class="box-one" @click="ItemClick(item)">
                            <p class="item-title" :style="`border-bottom: 1px solid ${ObjInput.ChangeColor};`">{{ item.Title }}</p>
                            <div class="word-one" v-for="(obj, objIndex) in item.data">
                                <p class="work-first">
                                    <span  v-if="obj.Project_Name">{{ obj.Project_Name }}</span>
                                    <span v-else class="showNodata">Position</span>
                                    <span  v-if="obj.Date">{{ obj.Date.join(' - ') }}</span>
                                    <span v-else class="showNodata">Date</span>
                                </p>
                                <ul v-if="obj.Description && getLiContent(obj.Description).length > 0 && getLiContent(obj.Description)[0] != ''"
                                    :style="!obj.hideIt ? 'list-style-type: disc;' : 'list-style-type: none; margin-left:0px;'">
                                    <li v-for="(liItem, liIndex) in getLiContent(obj.Description)" :key="liIndex">
                                        {{ liItem }}</li>
                                </ul>
                                <ul v-else>
                                    <li>
                                        <span class="showNodata">Bullets showcasing achievements and accomplishments</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </template>
                    <template v-else-if="item.type == 'CUSTOM'">
                        <div class="box-one" @click="ItemClick(item)">
                            <p class="item-title" :style="`border-bottom: 1px solid ${ObjInput.ChangeColor};`">{{ item.Title }}</p>
                            <div class="word-one">
                                <ul v-if="item.Description && getLiContent(item.Description).length > 0 && getLiContent(item.Description)[0] != ''"
                                    :style="!item.hideIt ? 'list-style-type: disc;' : 'list-style-type: none; margin-left:0px;'">
                                    <li v-for="(liItem, liIndex) in getLiContent(item.Description)" :key="liIndex">
                                        {{ liItem }}</li>
                                </ul>
                                <ul v-else>
                                    <li>
                                        <span class="showNodata">Bullets showcasing custom</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </template>
                    <template v-else-if="item.type == 'SKILLS'">
                        <div class="box-one" @click="ItemClick(item)">
                            <p class="item-title" :style="`border-bottom: 1px solid ${ObjInput.ChangeColor};`">{{ item.Title }}</p>
                            <div class="word-one">
                                <ul class="box-FeaturedList">
                                    <li v-for="(Featured,FeIndex) in item.FeaturedList" :key="FeIndex" :style="getLineTop(Featured)">
                                        <template v-if="Featured.name.trim()">
                                            <span>{{Featured.name}}</span>
                                            <el-rate
                                                style="min-width:120px;margin-left:5px"
                                                v-model="Featured.score"
                                                disabled
                                                :colors="[ObjInput.ChangeColor, ObjInput.ChangeColor, ObjInput.ChangeColor]"
                                                >
                                            </el-rate>
                                        </template>
                                    </li>
                                </ul>
                                <ul v-if="item.Description && getLiContent(item.Description).length > 0 && getLiContent(item.Description)[0] != ''"
                                    :style="!item.hideIt ? 'list-style-type: disc;' : 'list-style-type: none; margin-left:0px;'">
                                    <li v-for="(liItem, liIndex) in getLiContent(item.Description)" :key="liIndex">
                                        {{ liItem }}</li>
                                </ul>
                                <ul v-else>
                                    <li>
                                        <span class="showNodata">Bullets showcasing skills & expertise</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </template>
                </template>
            </template>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            ObjShowIt:{}
        }
    },
    props: {
        ObjInput: {
            type: Object,
            default: () => {
                return {}
            }
        },
        ShowObj: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    watch:{
        ObjInput:{
            deep:true,
            handler(val){
                let box = document.getElementById("main-box")
                for(let i = 0; i < box.children.length; i++){
                    // box.children[i].style.fontSize = val.ChangeSize + "pt";
                    box.children[i].style.fontFamily = val.ChangeFamily;
                }
            }
        },
        ShowObj:{
            deep:true,
            immediate:true,
            handler(val){
                this.ObjShowIt = val
            }
        }
    },
    computed: {

    },
    mounted(){
        let box = document.getElementById("main-box")
        for(let i = 0; i < box.children.length; i++){
            box.children[i].style.fontFamily = this.ObjInput.ChangeFamily;
        }
    },
    methods: {
        ItemClick(item){
            this.$emit('ScrollChange',item.type)
        },
        getLiContent(content) {
            let regex = /<li\b[^>]*>((?:[^<]|<(?!\/?li\b)[^>]*>)*?)<\/li>/gi;
            let matches = content.match(regex);
            let liTexts = matches && matches.map(match => {
                let content = match.replace(/^<li[^>]*>|<\/li>$/g, '');
                content = content.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, '').replace(/<br>/g, '');
                return content.trim();
            });
            return liTexts
        },
        getLineTop(item){
            if(item.name.trim() == ''){
                return 'margin-bottom: 0px'
            }
        },
    }
}
</script>

<style lang="less" scoped>
#main-box {
    max-width: 100%;
    padding: 48px;
    min-height: calc(100vh - 200px);
    background-color: #fff;
    min-width: 600px;  
    font: inherit;
    
    .showNodata{
        color: #a6a6a6 !important;
        
    }

    .main-title {
        width: 100%;
        // min-height: 30px;
        text-align: center;
        font-size: 23px;
        color: #000;
        font-weight: 600;
        word-break: break-word;
        padding: 2px;
        border: 1px dashed #fff;
        &:hover{
            border: 1px dashed #0075cb;
        }
    }

    .Objective{
        word-break: break-word;
    }

    .contact-box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        word-break: break-word;
        flex-wrap: wrap;
        font-size: 15px;
        color: #000;
        padding: 2px;
        border: 1px dashed #fff;
        &:hover{
            border: 1px dashed #0075cb;
        }

        .contact-one {
            margin-right: 10px;
            text-align: center;
            line-height: 25px;
        }
    }

    .item-title {
        width: 100%;
        font-size: 15px;
        word-break: break-word;
        margin-top: 8px;
        font-weight: 600;
        color:#000;
    }

    .box-one {
        max-width: 100%;
        margin-bottom: 10px;
        margin-top: 2px;
        padding: 2px;
        border: 1px dashed #fff;
        &:hover{
            border: 1px dashed #0075cb;
        }

        .word-one {
            width: 100%;
            height: 100%;
            margin-bottom: 10px;
            margin-top: 2px;
            word-break: break-word;
            padding-left: 2px;
            .box-FeaturedList{
                list-style:none;
                margin-left:0px;
                li{
                    display:flex;
                    align-items: center;
                    
                }
            }
            .work-first {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-weight: 600;
                margin-bottom: 2px;

                span {
                    // height: 30px;
                    font-size: 15px;
                    color: #000;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                }

                span:first-child {
                    max-width: calc(100% - 250px);
                }

                span:last-child {
                    max-width: 250px;
                    margin-left: 5px;
                    justify-content: flex-end;
                }
            }

            .work-second {
                font-size: 15px;
                color: #000;
                margin-bottom: 2px;
            }

            ul {
                margin-left: 15px;

                li {
                    font-size:15px;
                    line-height: 1.3;
                    margin-bottom: 2px;
                    color: #000;
                }
            }
        }
    }
}
</style>